<script lang="ts" setup>
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router";
import {RouterView, useRoute} from 'vue-router'
import {Document, Location, Menu as IconMenu, Setting,} from '@element-plus/icons-vue'
import {onMounted, onUpdated, ref} from "vue";

const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
}
const checkShopRoles = () => {
  axios.post("/api/auth/isShop", {}, {
    headers: {
      token: localStorage.getItem("wikiback-auth-token")
    }
  }).then(res => {
    console.log(res)
    const msg = res.data.message
    if (res.data.success) {
      localStorage.setItem("wikiback-auth-token", msg)
    } else {
      ElMessage({
        message: msg,
        type: "error"
      })
      setTimeout(() => {
        router.push("/")
      }, 200)
    }
  }).catch(err => {
    ElMessage({
      message: "权限异常，重新登录",
      type: "error"
    })
    setTimeout(() => {
      router.push("/")
    }, 200)
  })
}
if (localStorage.getItem("wikiback-auth-token")) {
  checkShopRoles()
} else {
  setTimeout(() => {
    router.push("/")
  }, 200)
}
const goPerfume = () => {
  router.push("/wiki/perfume")
}
const goOrder = () => {
  router.push("/wiki/order")
}
const goBland = () => {
  router.push("/wiki/bland")
}
const goIngredient = () => {
  router.push("/wiki/ingredient")
}
const getUserInfo = () => {
  axios.post("/api/auth/userinfo", {}, {
    headers: {
      token: localStorage.getItem("wikiback-auth-token")
    }
  }).then(res => {
    console.log(res)
    const msg = res.data.message
    username.value = msg.name
  })
}
getUserInfo()
const username = ref('admin')
const logout = () => {
  localStorage.removeItem("wikiback-auth-token")
  ElMessage({
    type: "error",
    message: "退出登录成功"
  })
  setTimeout(() => {
    router.push("/")
  }, 300)
}
const defaultActive = ref(1)
const route = useRoute();

onUpdated(() => {
  const path = route.path
  if (typeof path === 'string' || Array.isArray(path)) {
    if (path.includes('bland')) {
      defaultActive.value = 2
    } else if (path.includes('ingredient')) {
      defaultActive.value = 3
    } else if (path.includes('order')) {
      defaultActive.value = 4
    } else {
      defaultActive.value = 1
    }
  } else {
    console.log('Data is not a string or array:', path);
  }
  console.log(path.includes("bland"));

})
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <div>
          <div style="margin-left: 3vw;font-size: 22px;color: #b8ad98;cursor: pointer"
               @click="router.push('/wiki/index')"
          >WikiPerform
          </div>
        </div>
        <el-dropdown style="cursor: pointer">
            <span class="el-dropdown-link">
              {{ username ? username : "超级管理员" }}
              <el-icon class="el-icon--right">
                <arrow-down/>
              </el-icon>
            </span>
          <template #dropdown>
            <el-dropdown-menu style="cursor: pointer">
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-header>
      <el-container style="flex: 1;display: flex">
        <el-aside :style="'max-width:' + (isCollapse ? 150 : 200) + 'px'">

          <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
            <el-radio-button :value="false">Open</el-radio-button>
            <el-radio-button :value="true">Close</el-radio-button>
          </el-radio-group>
          <el-menu
              :collapse="isCollapse"
              :default-active="defaultActive"
              class="el-menu-vertical-demo"
              @close="handleClose"
              @open="handleOpen"
          >
            <el-menu-item index="1" @click="goPerfume">
              <el-icon>
                <location/>
              </el-icon>
              <span>香水管理</span>
            </el-menu-item>
            <el-menu-item index="2" @click="goBland">
              <el-icon>
                <icon-menu/>
              </el-icon>
              <template #title>品牌信息</template>
            </el-menu-item>
            <el-menu-item index="3" @click="goIngredient">
              <el-icon>
                <document/>
              </el-icon>
              <template #title>原料信息</template>
            </el-menu-item>
            <el-menu-item index="4" @click="goOrder">
              <el-icon>
                <setting/>
              </el-icon>
              <template #title>订单管理</template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <KeepAlive>
            <RouterView/>
          </KeepAlive>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<style lang="scss" scoped>
.common-layout {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;

  .header {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }


  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: 90%;
  }
}
</style>